<template>
  <div id="main6"></div>
</template>

<script lang="ts" setup>
import { onMounted } from "vue";
import * as echarts from "echarts";
import China from "./China.json";
var option;
onMounted(() => {
  var chartDom = document.getElementById("main6");
  var myChart = echarts.init(chartDom);
  echarts.registerMap("china", China);
  myChart.setOption(
    (option = {
      visualMap: {
        min: 800,
        max: 50000,
        text: ["High", "Low"],
        realtime: false,
        calculable: true,
        inRange: {
          color: ["lightskyblue", "yellow", "orangered"],
        },
      },
      tooltip: {
        trigger: "item",
      },
      bmap: {
        center: [104.114129, 37.550339],
        zoom: 5,
        roam: true,
        mapStyle: {
          styleJson: [
            {
              featureType: "water",
              elementType: "all",
              stylers: {
                color: "#044161",
              },
            },
            {
              featureType: "land",
              elementType: "all",
              stylers: {
                color: "#004981",
              },
            },
            {
              featureType: "boundary",
              elementType: "geometry",
              stylers: {
                color: "#064f85",
              },
            },
            {
              featureType: "railway",
              elementType: "all",
              stylers: {
                visibility: "off",
              },
            },
            {
              featureType: "highway",
              elementType: "geometry",
              stylers: {
                color: "#004981",
              },
            },
            {
              featureType: "highway",
              elementType: "geometry.fill",
              stylers: {
                color: "#005b96",
                lightness: 1,
              },
            },
            {
              featureType: "highway",
              elementType: "labels",
              stylers: {
                visibility: "off",
              },
            },
            {
              featureType: "arterial",
              elementType: "geometry",
              stylers: {
                color: "#004981",
              },
            },
            {
              featureType: "arterial",
              elementType: "geometry.fill",
              stylers: {
                color: "#00508b",
              },
            },
            {
              featureType: "poi",
              elementType: "all",
              stylers: {
                visibility: "off",
              },
            },
            {
              featureType: "green",
              elementType: "all",
              stylers: {
                color: "#056197",
                visibility: "off",
              },
            },
            {
              featureType: "subway",
              elementType: "all",
              stylers: {
                visibility: "off",
              },
            },
            {
              featureType: "manmade",
              elementType: "all",
              stylers: {
                visibility: "off",
              },
            },
            {
              featureType: "local",
              elementType: "all",
              stylers: {
                visibility: "off",
              },
            },
            {
              featureType: "arterial",
              elementType: "labels",
              stylers: {
                visibility: "off",
              },
            },
            {
              featureType: "boundary",
              elementType: "geometry.fill",
              stylers: {
                color: "#029fd4",
              },
            },
            {
              featureType: "building",
              elementType: "all",
              stylers: {
                color: "#1a5787",
              },
            },
            {
              featureType: "label",
              elementType: "all",
              stylers: {
                visibility: "off",
              },
            },
          ],
        },
      },
      series: [
        {
          name: "pm2.5",
          type: "scatter",
          coordinateSystem: "bmap",
          data: [
            { name: "新疆维吾尔自治区", value: 20057.34 },
            { name: "西藏自治区", value: 15477.48 },
            { name: "青海省", value: 31686.1 },
            { name: "甘肃省", value: 6992.6 },
            { name: "宁夏回族自治区", value: 44045.49 },
            { name: "内蒙古自治区", value: 40689.64 },
            { name: "黑龙江省", value: 37659.78 },
            { name: "吉林省", value: 45180.97 },
            { name: "辽宁省", value: 55204.26 },
            { name: "山东省", value: 21900.9 },
            { name: "河南省", value: 4918.26 },
            { name: "湖北省", value: 5881.84 },
            { name: "山西省", value: 4178.01 },
            { name: "安徽省", value: 2227.92 },
            { name: "浙江省", value: 2180.98 },
            { name: "上海市", value: 9172.94 },
            { name: "西贡", value: 3368 },
            { name: "陕西省", value: 806.98 },
            { name: "重庆市", value: 806.98 },
            { name: "广西壮族自治区", value: 806.98 },
            { name: "湖南省", value: 806.98 },
          ],
          encode: {
            value: 2,
          },
          symbolSize: function (val) {
            return val[2] / 10;
          },
          label: {
            formatter: "{b}",
            position: "right",
          },
          itemStyle: {
            color: "#ddb926",
          },
          emphasis: {
            label: {
              show: true,
            },
          },
        },
        {
          name: "Top 5",
          type: "effectScatter",
          coordinateSystem: "bmap",
          data: [
            { name: "新疆维吾尔自治区", value: 20057.34 },
            { name: "西藏自治区", value: 15477.48 },
            { name: "青海省", value: 31686.1 },
            { name: "甘肃省", value: 6992.6 },
            { name: "宁夏回族自治区", value: 44045.49 },
            { name: "内蒙古自治区", value: 40689.64 },
            { name: "黑龙江省", value: 37659.78 },
            { name: "吉林省", value: 45180.97 },
            { name: "辽宁省", value: 55204.26 },
            { name: "山东省", value: 21900.9 },
            { name: "河南省", value: 4918.26 },
            { name: "湖北省", value: 5881.84 },
            { name: "山西省", value: 4178.01 },
            { name: "安徽省", value: 2227.92 },
            { name: "浙江省", value: 2180.98 },
            { name: "上海市", value: 9172.94 },
            { name: "西贡", value: 3368 },
            { name: "陕西省", value: 806.98 },
            { name: "重庆市", value: 806.98 },
            { name: "广西壮族自治区", value: 806.98 },
            { name: "湖南省", value: 806.98 },
          ],
          symbolSize: function (val) {
            return val[2] / 10;
          },
          itemStyle: {
            color: "#f4e925",
            shadowBlur: 10,
            shadowColor: "#333",
          },
        },
        {
          name: "中国地图实时行驶车辆",
          type: "map",
          map: "china",
          label: {
            show: false,
          },
          data: [
            { name: "新疆维吾尔自治区", value: 20057.34 },
            { name: "西藏自治区", value: 15477.48 },
            { name: "青海省", value: 31686.1 },
            { name: "甘肃省", value: 6992.6 },
            { name: "宁夏回族自治区", value: 44045.49 },
            { name: "内蒙古自治区", value: 40689.64 },
            { name: "黑龙江省", value: 37659.78 },
            { name: "吉林省", value: 45180.97 },
            { name: "辽宁省", value: 55204.26 },
            { name: "山东省", value: 21900.9 },
            { name: "河南省", value: 4918.26 },
            { name: "湖北省", value: 5881.84 },
            { name: "山西省", value: 4178.01 },
            { name: "安徽省", value: 2227.92 },
            { name: "浙江省", value: 2180.98 },
            { name: "上海市", value: 9172.94 },
            { name: "西贡", value: 3368 },
            { name: "陕西省", value: 806.98 },
            { name: "重庆市", value: 806.98 },
            { name: "广西壮族自治区", value: 806.98 },
            { name: "湖南省", value: 806.98 },
          ],
          // 自定义名称映射
          //   nameMap: {
          //     "Central and Western": "中西区",
          //     Eastern: "东区",
          //     Islands: "离岛",
          //     "Kowloon City": "九龙城",
          //     "Kwai Tsing": "葵青",
          //     "Kwun Tong": "观塘",
          //     North: "北区",
          //     "Sai Kung": "西贡",
          //     "Sha Tin": "沙田",
          //     "Sham Shui Po": "深水埗",
          //     Southern: "南区",
          //     "Tai Po": "大埔",
          //     "Tsuen Wan": "荃湾",
          //     "Tuen Mun": "屯门",
          //     "Wan Chai": "湾仔",
          //     "Wong Tai Sin": "黄大仙",
          //     "Yau Tsim Mong": "油尖旺",
          //     "Yuen Long": "元朗",
          //   },
        },
      ],
    })
  );
});
</script>

<style>
#main6 {
  width: 100%;
  height: 100%;
}
</style>
